<template>
	<view class="container cart-container">
		<view class="cart-box">
			<view class="cart-item">
				<view class="cart-item-main">
					<!-- 商品选中按钮 -->
					<view class="cart-item-checkbox" @click="radioClickHandler">
						<u-image v-if="cartData.selectStatus" width="44rpx" height="44rpx" :show-loading="false"
							src="/static/icon/circle@selected.png">
							<!-- <u-loading slot="loading"></u-loading> -->
						</u-image>
						<u-image v-else width="44rpx" height="44rpx" :show-loading="false"
							src="/static/icon/circle@noselected.png">
							<!-- <u-loading slot="loading"></u-loading> -->
						</u-image>
					</view>
					<!-- 商品图 -->
					<view class="cart-item-img" @click="onProductsItemTap(cartData.id)">
						<u-image width="100%" height="100%" :src="cartData.url"
							shape="circle">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
					<!-- 商品文字 -->
					<view class="cart-item-word">
						<view class="title-box">
							<text class="title">{{cartData.name}}</text>
							<!-- <text>￥{{cartData.price}}</text> -->
							<u-icon top="1" name="rmb" size="28" :label='cartData.price'></u-icon>
						</view>
						<!-- 商品数量选择器and删除 -->
						<view class="bottom-box">
							<u-number-box :min="1" :max="99" v-model="cartData.count" @change="numChangeHandler">
							</u-number-box>
							<u-icon name="close" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 页脚 -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		name: "cart-card",
		props: {
			cartData: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			radioClickHandler(event) {
				// console.log(this.cartData.selectStatus);

				this.$emit('radio-change', {
					// 商品的 Id
					goods_id: this.cartData.id,
					// 商品最新的勾选状态
					goods_state: this.cartData.selectStatus
				})
			},
			numChangeHandler(event) {
				this.$emit('num-change', {
					// 商品的 Id
					goods_id: this.cartData.id,
					// 商品的最新数量
					goods_count: Number(event.value)
				})
			},
			onProductsItemTap(id) {
				this.$emit('onProductsItemTap', id)
			}
		},
	}
</script>

<style lang="scss">
	.cart-box {
		width: 750rpx;
		overflow-x: hidden;
		margin-bottom: 15rpx;
		font-size: 28rpx;

		.cart-item {
			display: flex;
			padding: 20rpx;
			padding-left: 0;
			// background-color: #fff;
			// border-bottom: 1rpx solid #D0D0D7;
			height: 200rpx;

			&:last-child {
				margin-bottom: 0;
			}

			&>view {
				width: 100%;
			}

			.cart-item-main {
				width: 100%;
				display: flex;

				.cart-item-checkbox {
					width: 84rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					// u-image {
					// 	height: 44rpx;
					// 	width: 44rpx;
					// }
				}

				.cart-item-img {
					width: 186rpx;
					height: 100%;
					background-color: #F5F6F5;
					border-radius: 40rpx;
				}

				.cart-item-word {
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					padding: 8rpx 0;
					margin: 0 20rpx;
					box-sizing: border-box;
					color: #454553;

					.title-box {
						display: flex;
						justify-content: space-between;
					}

					.bottom-box {
						font-size: 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
		}
	}
</style>
